สร้างเมนู จากแอเรย์ หรือ ฐานข้อมูล (Javascript)
สร้างเมนูจาก Array โดยอาจเป็น Array ที่กำหนดไว้ หรือ query จากฐานข้อมูล เอามาใส่ไว้ในแอเรย์ก่อนก็ได้
ส่วนของ Javascript สามารถแยกออกเป็นไฟล์ .js ได้
<?
$language=array("ไทย", "english"); //แอเรย์ของข้อมูล
?>
<!--รูปแบบการแสดงผลของเมนู เปลี่ยนแปลงเอาตามใจชอบ-->
<style>
#topmenu {
border: 1px solid green;
background-color: white;
width: 150px;
text-align: center;
}
#topmenu a {
margin: 1px 1px 1px 1px;
display: block;
text-decoration: none;
}
#topmenu a:hover {
background: #D3E4F5;
border: 1px solid #167FB2;
margin: 0px 0px 0px 0px;
display: block;
}
#topmenu a.current {
background: #D3E4F5;
border: 1px solid #167FB2;
margin: 0px 0px 0px 0px;
display: block;
}
#submenu {
position: absolute;
border: 1px solid orange;
background-color: white;
display: none;
width: 100px;
}
#submenu a {
text-decoration: none;
margin: 1px 1px 1px 1px;
}
#submenu a:hover {
background: #D3E4F5;
border: 1px solid #167FB2;
margin: 0px 0px 0px 0px;
}
</style>
<!--พื้นที่ส่วนหัวเมนู-->
<div id=topmenu><a href="Javascript:overlay('topmenu', 'submenu')" onmouseover="doMouseover('submenu')">เลือกภาษา</a></div>
<!--พื้นที่รายการเมนู-->
<div id=submenu onmouseout="delayHide('submenu')" onmouseover="doMouseover('submenu')">
<table align=center width=100%>
<? //วนลูปลิสต์รายการจากแอเรย์ของข้อมูล (หรือจากฐานข้อมูล)
foreach($language as $name=>$val) {
echo "<tr><td align=center><a href='index.php?lang=$name'>$val</td></tr>";
}
?>
</table>
</div>ส่วนของ Javascript สามารถแยกออกเป็นไฟล์ .js ได้
<script language=Javascript>
function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null) {
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function overlay(curobjstr, subobjstr) {
if (document.getElementById) {
var subobj=document.getElementById(subobjstr)
var curobj=document.getElementById(curobjstr)
subobj.style.display=(subobj.style.display!="block")? "block" : "none"
var xpos=getposOffset(curobj, "left")
var ypos=getposOffset(curobj, "top")
subobj.style.top=ypos+curobj.offsetHeight+2+"px"
subobj.style.left=xpos-subobj.offsetWidth+curobj.offsetWidth+"px"
};
}
var timedelay;
function delayHide(lyr) {
timedelay=setTimeout('document.getElementById("'+lyr+'").style.display="none"', 330);
}
function doMouseover() {
clearTimeout(timedelay);
}
</script>